<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:comps="http://java.sun.com/jsf/composite/comps" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core" >

    <body>

        <ui:composition template="./../../resources/templates/newTemplate.xhtml">

            <ui:define name="left">
                <comps:miPanel />
            </ui:define>

            <ui:define name="principal">

                <div style="margin: 0 30px">
                    <p:growl id="growl"  showDetail="true" />
                    <div style="float: left; width: 400px;">

                        <div class="panelInfoAlquiler">
                            <h5>Usted esta modificando el arquiler del articulo:</h5>
                            
                            <div style="float: left; width: 130px; position: relative">
                                <h:graphicImage value="/image?id=#{modAlquilerBean.alquiler.imagenId}"
                                                rendered="#{modAlquilerBean.alquiler.imagenId != -1}"
                                                width="120" />
                                <h:graphicImage value="#{resource['images:noImage.png']}" 
                                                rendered="#{modAlquilerBean.alquiler.imagenId == -1}"
                                                width="120" />
                            </div>
                            <div style="float: left;">

                                <h:panelGrid columns="2" >
                                    <h:outputLabel value="Articulo: " styleClass="label" />
                                    <h:link value="#{modAlquilerBean.alquiler.titulo}" outcome="/vistas/mostrarPublicacion" styleClass="valor" >
                                        <f:param name="id" value="#{modAlquilerBean.alquiler.idPublicacion}" />
                                    </h:link>

                                    <h:outputLabel value="Cantidad: " styleClass="label" />
                                    <h:outputText value="#{modAlquilerBean.alquiler.cantidad}" styleClass="valor" />

                                    <h:outputLabel value="#{modAlquilerBean.tomado ? 'De:': 'Alquilador: '}" styleClass="label" />
                                    <h:link value="#{modAlquilerBean.alquiler.usuario}" outcome="/vistas/verReputacion" styleClass="valor" >
                                        <f:param name="id" value="#{modAlquilerBean.alquiler.idUsuario}" />
                                    </h:link>

                                    <h:outputLabel value="Fecha desde:" styleClass="label" />
                                    <h:outputText value="#{modAlquilerBean.alquiler.fechaDesde}" styleClass="valor" />

                                    <h:outputLabel value="Fecha hasta:" styleClass="label" />
                                    <h:outputText value="#{modAlquilerBean.alquiler.fechaHasta}" styleClass="valor" />

                                    <h:outputLabel value="Monto:" styleClass="label" />
                                    <h:outputText value="$ #{modAlquilerBean.alquiler.monto}" styleClass="valorDest" />
                                </h:panelGrid>                                
                            </div>
                        </div>

                        <div style="float: left">
                            <h:form id="form">
                                <h:panelGrid  columns="2" cellpadding="2" cellspacing="4" >

                                    <f:facet name="header" >
                                        <h:outputText value="Datos a cambiar:" 
                                                      style="font-size: 14px; font-weight: bold;"/>
                                    </f:facet>

                                    <h:outputLabel value="Periodo" for="fechaHasta" />
                                    <h:outputText id="periodo" value="#{modAlquilerBean.periodo}" />

                                    <h:outputLabel value="Nueva duración:" for="duracion" />
                                    <p:spinner id="duracion" value="#{modAlquilerBean.duracion}" min="1" >
                                        <p:ajax process="@this" update="monto" listener="#{modAlquilerBean.actualizarMonto}" />
                                    </p:spinner>
                                    
                                    <h:outputLabel value="Monto" for="monto" />
                                    <h:outputText id="monto" value="$ #{modAlquilerBean.nuevoMonto}" style="font-weight: bold" />

                                    <f:facet name="footer" >
                                        <p:commandButton value="Solicitar cambio" action="#{modAlquilerBean.solicitarCambio}" 
                                                         rendered="#{modAlquilerBean.tomado}" ajax="false"/>
                                        <p:commandButton value="Modificar" action="#{modAlquilerBean.modificarAlquiler}" 
                                                         rendered="#{not modAlquilerBean.tomado}" ajax="false"/>
                                        <p:button value="Cancelar" outcome="/vistas/usuario/articulos" />
                                    </f:facet>
                                </h:panelGrid>
                            </h:form>
                        </div>
                    </div>

                    <p:panel style="width: 280px; float: left" >
                        <h:outputLabel value="Precios:" style="margin-top: 5px; font-weight: bold; color: steelblue" /> <br/>
                        <ui:repeat value="#{modAlquilerBean.publicacion.precios}" var="precio" >
                            <h:outputText value="$ #{precio.precio}" style="font-weight: bold" />
                            <h:outputText value=" /#{precio.periodoNombre.toString()}" />
                            <br/>
                        </ui:repeat>
                        <br/>

                        <h:outputLabel value="Periodo minimo:"/>
                        <h:outputLabel value="#{modAlquilerBean.publicacion.periodoMinimoValor} "/>
                        <h:outputLabel value="#{modAlquilerBean.publicacion.periodoMinimo.nombre.toString()}"/>
                        <br/>
                        <h:outputLabel value="Periodo maximo:"/>
                        <h:outputLabel value="#{modAlquilerBean.publicacion.periodoMaximoValor} "/>
                        <h:outputLabel value="#{modAlquilerBean.publicacion.periodoMaximo.nombre.toString()}"/>
                        <br/><br/>
                        <h:outputLabel value="Disponibilidad:" style="margin-top: 15px; font-weight: bold;color: steelblue"/>
                        <p:calendar id="rentCalendar" mode="inline" pattern="dd/MM/yyyy" mindate="#{modAlquilerBean.alquiler.fechaInicio}" />
                    </p:panel>

                    <script type="text/javascript" >
                         jQuery(function () {
                                 window.setTimeout('bindEventsHighlights()',500);
                         });

                         function bindEventsHighlights() {
                                 var specialDays = <h:outputText value="#{modAlquilerBean.myJson}" /> ;
                                 jQuery(".hasDatepicker").datepicker("option", "beforeShowDay", function (date) {
                                           return highlightCalendar(specialDays, date, 'highlight-calendar');
                                 });
                        }
                    </script>
                </div>
            </ui:define>

        </ui:composition>

    </body>
</html>
